<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-23 15:56:55
 * @LastEditTime: 2022-02-10 13:39:48
 * @LastEditors: xuechengwu
-->
<template>
  <div class="data-link-btn">
      <div @click="show = true">
          设置
      </div>
      <el-dialog
        title="数据绑定"
        :visible.sync="show"
        >
        <el-tabs v-model="type">
            <el-tab-pane label="接口数据" name="0">
                <div class="interface-select">
                    <label>数据源</label>
                    <el-select
                        v-model="source"
                        size="mini"
                        placeholder="请选择数据源">
                    <el-option
                        v-for="item in page.interfaces"
                        :label="item.name"
                        :value="item.key"
                        :key="item.key"
                        />
                    </el-select>
                </div>
                <div class="data-selected">
                    <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        show-checkbox
                        accordion
                        check-strictly
                        @check-change="onChecked"
                        ></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="页面数据" name="1">
                <div class="interface-select">
                    <label>数据源</label>
                    <el-select
                        v-model="source"
                        size="mini"
                        placeholder="请选择数据源">
                        <el-option
                            v-for="item in pageDatas"
                            :label="item.name"
                            :value="item.key"
                            :key="item.key"
                        />
                    </el-select>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer">
            <el-button type="primary" @click="show = false">取消</el-button>
            <el-button type="success" @click="onOk">确定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
function getTree(data, path = '') {
    if (typeof data !== 'object' || data === null) {
        return [{
            label: data,
        }];
    }
    const keys = Object.keys(data);
    return keys.map(vo => {
        const key = path === '' ? vo : `${path}.${vo}`;
        return ({
            label: vo,
            key,
            children: getTree(data[vo], key),
        })
    });
}
export default {
    props: ['page', 'path'],
    data() {
        return {
            show: false,
            type: 0,
            source: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            selectedKey: '',
        };
    },
    computed: {
        treeData() {
            const { values = {} } = this.page;
            const { source } = this;
            return getTree(values[source]);
        },
        pageDatas() {
            const { datas } = this.page;
            return Object.keys(datas).map(vo => ({
                key: vo,
                ...datas[vo],
            }));
        }
    },
    methods: {
        onChecked(data, checked) {
            if (checked) {
                this.selectedKey = data.key;
            } else {
                this.selectedKey = '';
            }
        },
        onOk() {
            const { selectedKey, source, path, type } = this;
            if (Number(type) === 1) {
                this.$emit('change', { selectedKey, source, path, type: Number(type) });
            } else if (selectedKey !== '') {
                this.$emit('change', { selectedKey, source, path, type: Number(type) });
            }
            this.show = false;
            console.log('page===>', this.page);
        }
    }
}
</script>

<style lang="less" scoped>
.interface-select {
    display: flex;
    align-items: center;
    label {
        font-size: 12px;
        margin-right: 12px;
    }
}
.data-selected {
    height: 320px;
    border: solid 1px #DFDFDF;
    background: #FEFEFE;
    overflow-y: auto;
    margin-top: 12px;
}
</style>